<template>
    <div class="content">
        <div class="title-item">
            <span class="left">流行病学调查</span>
        </div>
        <div id="main" class="chart-item"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { Dialog } from 'vant'
import { blqsList } from '@/api/epidemic-surveillance/case-analysis'
export default {
  name: 'index',
  data () {
    return {
    }
  },
  methods: {
    async init () {
      const { data } = await blqsList()
      let params = { md: [], data1: [], data2: [] }
      if (data.errcode === 0) {
        const list = data.data
        list.forEach(item => {
          params.md.push(item.md)
          params.data1.push(item.confirm_num_last)
          params.data2.push(item.suspect_num_last)
        })
      } else {
        Dialog.alert({
          message: data.errmsg
        }).then(() => {
          // on close
        })
      }
      let myChart = echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['报告确诊病例', '报告疑似病例'],
          bottom: 10
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '7%',
          top: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: params.md
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '报告确诊病例',
            type: 'line',
            data: params.data1
          },
          {
            name: '报告疑似病例',
            type: 'line',
            data: params.data2
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    }

  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .content{
        /*background-color: #efefef;*/
        /*height: auto;*/
    }
    .chart-item-1{
        width: 100%;
        height: 400px;
    }
    .chart-item{
        width: 100%;
        height: 600px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item .left{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .title-item .right{
        float: right;
        color: gray;
        font-size: 12px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 0 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .content-item{
        padding: 0 10px;
    }
    .content-item .van-row{
        border: 1px solid #dddddd;
        border-radius: 5px;
        padding: 0 10px 10px 10px;
        font-size: 12px;
        background-color: #ffffff;
    }
    .content-item .time-item{
        font-size: 10px;
        text-align: right;
        padding: 10px 0 0 0;
    }
    .content-item>.van-row>.van-col.van-col--4>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--6>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--8>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--4{
        padding: 0 2px;
        width: 20%;
    }
    .content-item>.van-row>.van-col.van-col--6{
        padding: 0 2px;
    }
    .content-item>.van-row>.van-col.van-col--8{
        padding: 0 2px;
    }
    .num{
        font-size: 14px;
    }
    .title-name{
        background: #dddddd;
    }
    .add-item{
        font-size: 10px;
    }
    .color-oranged{
        color: orangered;
    }
    .color-orange{
        color: orange;
    }
    .color-green{
        color: rgb(40, 183, 163);
    }
    .color-gray{
        color: gray;
    }
    .color-blue{
        color: rgb(51, 102, 255);
    }
    .table-item .van-col.van-col--4{
        width: 20%;
        font-size: 12px;
    }
    .van-icon.van-icon-chart-trending-o{
        font-size: 14px;
    }
    .diagnosis{
        padding: 0 10px;
    }
    .diagnosis .diagnosis-item{
        padding: 0 2px;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder{
        border: 1px solid #8b0000;
        border-top: 5px solid #8b0000;
        padding: 10px;
        font-size: 12px;
        margin-bottom: 5px;
        background-color: #ffffff;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder span{
        font-weight: bold;
    }
    .pd{
        padding: 0 0 5px 0;
    }
    .van-row .pd:last-child{
        padding: 0;
    }
    .echart{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin: 10px 0;
    }
</style>
